
<template>
    <div class='details'>
        <h2>基本资料</h2>
        <div class="wrap-container">
            <div class="wrap">
                <div class="box-top">
                    <div class="image"></div>
                </div>
                <div class="box-bottom">
                    <h2>张志聪</h2>
                    <span>梦想成为大神的前端小菜鸟</span>
                </div>
                <div class="box-bottom2">
                    <ul>
                        <li>籍贯：山西晋城</li>
                        <li>学历：本科（全日制） </li>
                        <li>毕业院校：山西应用科技学院(20 年毕业)</li>
                        <li>专业：计算机科学与技术</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script >
export default ({
    name:'',
    components: {

    },
})
</script>
<style lang="scss"  scoped>
.wrap-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* -------------------------------------------- */
/* 外层容器 */
/* -------------------------------------------- */
.wrap{
    position: relative;
    width: 430px;
    height: 300px;
    background-color: rgb(255,255,255);
    box-shadow: 0 0 10px rgb(0,0,0,.5);
    overflow: hidden;
    border-radius: 0 0 30px 30px;
}
/* -------------------------------------------- */
/* 上部分的块 */
/* -------------------------------------------- */
.box-top{
    position: relative;
    width: 430px;
    height: 180px;
    background-color: rgb(180,180,210);
    display: flex;
    justify-content: center;
    transition: .5s;
}
.box-top::after{
    content: '';
    width: 40px;
    height: 40px;
    clip-path: polygon(50% 40%,0 0,100% 0);
    background-color: rgb(180,180,210);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -38px;
    z-index: 999;
}
.image{
    position: absolute;
    top: 20px;
    width: 90px;
    height: 90px;
    background-image: url("../img/myself.jpg");
    background-size: cover;
    border: 5px solid rgb(140,140,170);
    transition: .5s;
}
/* -------------------------------------------- */
/* 下部分的两个大块 */
/* -------------------------------------------- */
.box-bottom,.box-bottom2{
    position: absolute;
    top: 180px;
    width: 430px;
    height: 130px;
    text-align: center;
    transition: .5s;
}
.box-bottom h2{
    display: block;
    margin: 30px 0 10px 0;
    font: 800 28px 'Hobo Std';
}
.box-bottom span{
    font: 400 24px 'Giddyup Std';
}
.box-bottom h2::after{
    content: '';
    display: block;
    width: 200px;
    height: 2px;
    background-color: #000;
    position: absolute;
    left: 50%;
    transform: translate(-50%,4px);
}
/* -------------------------------------------- */
/* 下部分的第二个大块 */
/* -------------------------------------------- */
.box-bottom2{
    top: 300px;
    height: 220px;
}
.box-bottom2 li{
    margin: 25px;
    font: 800 20px 'OCR A Std';
    transition: .2s;
}
/* -------------------------------------------- */
/* 鼠标移入的效果 */
/* -------------------------------------------- */
.wrap:hover .box-top{
    height: 50px;
}
.wrap:hover .image{
    width: 35px;
    height: 35px;
    border-width: 3px;
    transform: translate(-140px,-15px);
}
.wrap:hover .box-bottom{
    top: 300px;
}
.wrap:hover .box-bottom2{
    top: 50px;
}
li:hover{
    color:rgb(100,160,160)
}
.details{
  padding: 40px;
  float: right;
  background-color:#fff;
  width:1200px;
  height: 700px;
  border-radius:20px;	
}
</style>